import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import house from './house.js'
import grass from './grass.js'
import { gui } from './roof.js'

//创建场景
const scene = new THREE.Scene()
scene.fog = new THREE.Fog(0xcccccc, 1000, 40000)

const fogControl = gui.addFolder('雾')
fogControl.add(scene.fog, 'near').step(100)
fogControl.add(scene.fog, 'far').step(1000)

//添加模型到场景
scene.add(house)
scene.add(grass)

//创建环境光
const directionLight = new THREE.DirectionalLight(0xffffff)
//设置环境光位置
directionLight.position.set(3000, 3000, 3000)
//添加环境光到场景
scene.add(directionLight)

const ambientLight = new THREE.AmbientLight()
scene.add(ambientLight)


//创建坐标轴辅助器 传入坐标轴长度
const axesHelper = new THREE.AxesHelper(20000)
//添加坐标轴辅助器到场景
// scene.add(axesHelper)

//获取页面宽度高度
const width = window.innerWidth
const height = window.innerHeight
//创建相机 传入相机的角度、宽高比、近平面和远平面
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 30000)
//设置相机位置
camera.position.set(5000, 5000, 5000)
//设置相机方向
camera.lookAt(0, 0, 0)
//创建WebGL渲染器
const renderer = new THREE.WebGLRenderer({
    logarithmicDepthBuffer: true
})
//设置渲染器尺寸
renderer.setSize(width, height)
renderer.setClearColor(new THREE.Color('skyblue'))

let angle = 0
let r = 5000
function render() {
    angle += 0.01
    if(angle >= Math.PI * 2) {
        angle -= Math.PI * 2
        r = 5000 + Math.random() * 10000
        camera.position.y = 1000 + Math.random() * 10000
    }
    camera.position.x = r * Math.cos(angle)
    camera.position.z = r * Math.sin(angle)
    camera.lookAt(0, 0, 0)
    //渲染场景和相机
    renderer.render(scene, camera)
    //请求浏览器执行渲染函数
    requestAnimationFrame(render)
}
render()

//将渲染器添加到页面
document.body.append(renderer.domElement)
//创建轨道控制器 传入相机和渲染器
const controls = new OrbitControls(camera, renderer.domElement)